<template>
  <div class='rows_list_component'>
    <div class="item" v-for="(item, index) in list" :key="index" @click="jump(item)">
      <van-image class="cover_img" :src="`${resourceURL}${item.imageurl}`" fit="cover" />
      <div class="product_name">{{ item.product_name }}</div>
      <div class="price">
        <div class="rows">
          <span class="sprice">￥{{ item.mprice }}</span>
          <span class="origin_price">可得{{ item.jifen }}积分</span>
        </div>
        <!-- <div class="cart_icon">
          <van-icon :name="require('@/assets/img/carticon.png')" />
        </div> -->
      </div>
    </div>
  </div>
</template>

<script>

export default {
  props: {
    list: {
      type: Array,
      require: true,
    }
  },
  methods: {
    jump (item) {

      this.$router.push({
        name: 'product',
        query: {
          id: item.product_id
        }

      })
    },
  },
}
</script>

<style scoped lang='less'>
.rows_list_component {
  display: grid;
  grid-template-columns: repeat(2, 165px);
  justify-content: center;
  grid-gap: 10px 15px;
  box-sizing: border-box;

  .item {
    border-radius: 10px;
    background-color: #fff;
    box-sizing: border-box;
    background: #ffffff;
    border-radius: 6px 6px 6px 6px;
    opacity: 1;
    // border: 1px solid #f2f2f2;
    overflow: hidden;
    box-shadow: 0px 3px 10px 1px rgba(1, 12, 27, 0.06);

    .cover_img {
      width: 100%;
      height: 140px;
      border-radius: 10px;
      overflow: hidden;
    }

    .product_name {
      color: #470607;
      font-size: 14px;
      margin: 6px 8px 9px;
      box-sizing: border-box;
      display: -webkit-box; // 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
      -webkit-box-orient: vertical; // 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。
      -webkit-line-clamp: 1; // 用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。
      overflow: hidden;
    }

    .price {
      display: flex;
      justify-content: space-between;
      align-items: center;

      margin-left: 8px;
      margin-bottom: 9px;
      box-sizing: border-box;

      .rows {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        vertical-align: center;
      }

      .sprice {
        font-size: 14px;

        font-family: Microsoft YaHei-Bold, Microsoft YaHei;
        font-weight: bold;
        color: #fb2b2c;
      }

      .origin_price {
        margin-left: 9px;
        font-size: 12px;
        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
        font-weight: 400;
        color: rgba(32, 35, 39, 0.6);
      }

      .cart_icon {
        display: flex;
        align-items: flex-end;
        width: 36px;
        height: 46px;

        .van-icon {
          font-size: 36px;
        }
      }
    }
  }
}
</style>
